<template>
  <view class="sift">
    <view class="page-container flex flex-middle">
      <view
        class="left flex flex-middle flex-center"
        @click="changeShowSort(!showSort)"
      >
        {{ columns[0][sortIndex] }}
        <u-icon class="icon" name="arrow-down-fill" size="10" color="#CACACA" />
      </view>
      <view class="middle flex flex-middle flex-1">
        <view class="middle-item flex flex-middle flex-center">
          <u-icon
            class="icon"
            name="checkmark-circle"
            size="10"
            color="#37756D"
          />
          极速响应
        </view>
        <view class="middle-item flex flex-middle flex-center">
          <u-icon
            class="icon"
            name="checkmark-circle"
            size="10"
            color="#37756D"
          />
          安心保障
        </view>
        <view class="middle-item flex flex-middle flex-center">
          <u-icon
            class="icon"
            name="checkmark-circle"
            size="10"
            color="#37756D"
          />
          售后无忧
        </view>
      </view>
      <view
        class="right flex flex-middle flex-center"
        @click="changeShowSift(!showSift)"
      >
        筛选
        <u-icon class="icon" name="list" size="10" color="#CACACA" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    changeShowSift: {
      type: Function,
      default: () => {},
    },
    showSift: {
      type: Boolean,
      default: false,
    },
    changeShowSort: {
      type: Function,
      default: () => {},
    },
    showSort: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    sortIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.sift {
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid #eee;

  .page-container {
    height: 100%;
    color: #6c6c6c;

    .middle {
      padding: 0 6px;

      &-item {
        width: 33.33%;
        font-size: 12px;
        color: #37756d;

        .icon {
          margin-right: 2px;
        }
      }
    }

    .left {
      width: 80px !important;
    }

    .left,
    .right {
      width: 66px;
      height: 100%;

      .icon {
        margin-left: 2px;
      }
    }
  }
}
</style>